带搜索功能的select下拉框实现

2024-04-06 分类：JavaScript 作者：admin 阅读（19）

第一步:

引入我们用使用的插件

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

第二步:

创建一个html页面，body内容:

        <div>
            <select class="singleSelect" style="width: 200px;">
                <option value="">--请选择--</option>
                <option value="">阿里</option>
                <option value="">阿姨</option>
                <option value="">江南</option>
                <option value="">杭州</option>
                <option value="">无锡</option>
                <option value="">上海</option>
            </select>
 
        </div>

<div>

</select>

</div>

第三步:

书写js脚本，调用我们的js方法

    <script type="text/javascript">
 
        $(document).ready(function() {
                $('.singleSelect').select2();
 
            });
 
</script>

$(document).ready(function() {

$('.singleSelect').select2();

});

</script>

注意第三步实现的位置，必须跟着select html后面，在其他位置可能不行。

完整html如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" ></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" ></script>
    <style>
        
    </style>
    <body>
        <div>
            <select class="singleSelect" style="width: 200px;">
                <option value="">--请选择--</option>
                <option value="">阿里</option>
                <option value="">阿姨</option>
                <option value="">江南</option>
                <option value="">杭州</option>
                <option value="">无锡</option>
                <option value="">上海</option>
            </select>
 
        </div>
            <script type="text/javascript">
 
        $(document).ready(function() {
                $('.singleSelect').select2();
 
            });
 
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<style>

</style>

<body>

<div>

</select>

</div>

$(document).ready(function() {

$('.singleSelect').select2();

});

</script>

</body>

</html>

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(0) 打赏

标签：

上一篇：go 协程池

下一篇：mkcert 使用指南：如何快速创建自签名 SSL 证书

你可能感兴趣

什么是跨域？如何解决跨域问题？

html自定义属性

关于npm

bootstrap 使用

JS实现页面跳转的几种方法

js读取解析JSON数据

共有 0 - 带搜索功能的select下拉框实现

点击这里取消回复。

博客简介

admin（6年前 (2020-03-09)）
分别用不同厚度的筏板定义，画图后这设置筏板变截面处理。 http://f.fwxgx.co...
评：新文章！
admin（6年前 (2020-03-09)）
分别用不同厚度的筏板定义，画图后这设置筏板变截面处理。 http://f.fwxgx.co...
评：新文章！
admin（6年前 (2020-03-09)）
新增一个框架图！ http://biji.jinli.vip/wp-content/upl...
评：新文章！
一位WordPress评论者（6年前 (2020-02-13)）
嗨，这是一条评论。要开始审核、编辑及删除评论，请访问仪表盘的“评论”页面。评论者头像来自...
评：世界，您好！

带搜索功能的select下拉框实现

你可能感兴趣

共有 0 - 带搜索功能的select下拉框实现

点击这里取消回复。

博客简介

最近更新

随机文章

热门标签

精彩评论